<template>
  <div>
    <heads title="通讯录"></heads>
    <div class="Athe">
      <ul>
        <p>A</p>
        <li>
          <div class="note-toMnk no">
            <van-row>
              <van-col span="6" class="note-img">
                <div class="toMnk-img">
                  <img src="https://s1.ax1x.com/2022/10/18/xrc1ts.png" alt="" />
                </div>
              </van-col>
              <van-col span="15" class="note-information">
                <p class="toMnk-p1">张薇（13522211114） 求诊方</p>
                <p class="toMnk-p2">市东医院 小儿心内科</p>
              </van-col>
            </van-row>
          </div>
        </li>
      </ul>
      <ul>
        <p>c</p>
        <li>
          <div class="note-toMnk no">
            <van-row>
              <van-col span="6" class="note-img">
                <div class="toMnk-img">
                  <img src="https://s1.ax1x.com/2022/10/18/xrc1ts.png" alt="" />
                </div>
              </van-col>
              <van-col span="15" class="note-information">
                <p class="toMnk-p1">张薇（13522211114） 求诊方</p>
                <p class="toMnk-p2">市东医院 小儿心内科</p>
              </van-col>
            </van-row>
          </div>
        </li>
      </ul>
      <ul>
        <p>b</p>
        <li>
          <div class="note-toMnk no">
            <van-row>
              <van-col span="6" class="note-img">
                <div class="toMnk-img">
                  <img src="https://s1.ax1x.com/2022/10/18/xrc1ts.png" alt="" />
                </div>
              </van-col>
              <van-col span="15" class="note-information">
                <p class="toMnk-p1">张薇（13522211114） 求诊方</p>
                <p class="toMnk-p2">市东医院 小儿心内科</p>
              </van-col>
            </van-row>
          </div>
        </li>
      </ul>

    </div>
  </div>
</template>

<script >
import heads from "@/components/heads/heads.vue";
export default {
    name:'Ther',
    components: { heads },
};
</script>

<style lang="less" scoped>
.Athe {
  width: 100%;
  height: 100%;
  ul {
    p {
      height: 1.25rem;
      color: #999999;
      background: #f2f2f2;
      font-size: 0.625rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding-left: 1.25rem;
    }
  }
}
.note-toMnk {
  height: 3.5625rem;
  border-top: 0.125rem solid #cccccc;
  border-bottom: 0.125rem solid #cccccc;
  background: #fff;
  border-collapse: collapse;

  .toMnk-img {
    width: 2.5625rem;
    height: 2.5rem;
    border: 0.0625rem solid #cccccc;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.3125rem;
  }
  .toMnk-p1 {
    background: #fff;
  }
  .toMnk-p2 {
    color: #999999;
    background: #fff;
  }
  .Phone {
    font-size: 0.875rem;
  }
  .name {
    padding-top: 1.3125rem;
    height: 3.5625rem;
    box-sizing: border-box;
    color: #1e1e1e;
    font-size: 0.875rem;
  }
}
.note-img {
  height: 3.5625rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.note-information {
  height: 3.5625rem;
  box-sizing: border-box;
  padding-top: 0.6875rem;
  color: #1e1e1e;
  font-size: 0.875rem;
}
</style>